<template>
  <div>
    <Back :title="item ? (item.Name + $t('ConContent_containDetail')) : $t('ConContent_containDetail')"></Back>
    <div class="from btn">
      <div class="title">
        {{$t('ConContent_operation')}}
      </div>
      <ConButton :multipleSelection="[item]" state="false"></ConButton>
      <ReButton :item="item"></ReButton>
    </div>
    <ContainerState :item="item" @success="fetchItem"></ContainerState>
    <ConImage :item="item"></ConImage>
    <ContainerInfo :item="item"></ContainerInfo>
    <ConNetwork @Success="fetchItem" :item="item"></ConNetwork>
  </div>
</template>

<script>
import Vue from 'vue'
import { Form, FormItem, Select, Option, Input, Button, Popover, Table, TableColumn, Pagination } from 'element-ui'
import post from '@/utils/post'
import ConButton from '@/components/container/ConButton'
import ReButton from '@/components/conContent/ReButton'
import ContainerState from '@/components/conContent/ContainerState'
import ConImage from '@/components/conContent/ConImage'
import ContainerInfo from '@/components/conContent/ContainerInfo'
import ConNetwork from '@/components/conContent/ConNetwork'
import Back from '@/components/Back'
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Select)
Vue.use(Input)
Vue.use(Option)
Vue.use(Button)
Vue.use(Popover)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Pagination)

export default {
  data () {
    return {
      item: null
    }
  },
  mounted () {
    this.fetchItem()
  },
  methods: {
    fetchItem () {
      const docker = `curl --unix-socket /var/run/docker.sock -s "http:/v1.40/containers/${this.$route.params.id}/json"`
      post({ docker }, res => {
        this.item = res
      }, this)
    }
  },
  components: {
    ConButton,
    ReButton,
    ContainerState,
    ConImage,
    ContainerInfo,
    ConNetwork,
    Back
  }
}
</script>

<style lang="scss" scoped>
.btn{
  display: flex;
  flex-wrap: wrap;
}
.from{
  border: 1px solid #067FB5;
  border-radius: 15px;
  padding: 20px 10px 20px 10px;
  margin: 30px 0px;
  background: #F7FCFF;
  position: relative;
  .title{
    position: absolute;
    top: -14px;
    z-index: 10;
    left: 30px;
    font-size: 18px;
    font-weight: bold;
    background: #F7FCFF;
    padding: 0px 5px;
    border-radius: 5px;
  }
}
</style>
